<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区</title>
    <link rel="stylesheet" href="./swiper-7.2.0/swiper/swiper-bundle.min.css">
    <script src="./img/font/iconfont.js"></script>
    <script src="./img/font_1/iconfont.js"></script>
    <link rel="stylesheet" href="./index.css">
    <style>
        .header{
            border-bottom: 1px solid #eee;
        }
        .FF>.header>.zuo>.dh{
            font-size: 4.3vw;
            font-weight: bold;
            margin-left: 2vw;
        }
        .first{
            display: none;
        }
        .show1{
            display: block;
        }
        .mySwiper1 .swiper-wrapper{
            margin-top: 4vw;
        }
        .mySwiper1 img{
            padding-left: 3.5vw;
            width: 11.2vw;
            height: 11.2vw;
        }
        .mySwiper1 p{
            font-size: 2vw;
            text-align: center;
        }
        .second{
            display: flex;
            margin-top: 3vw;
        }
        .second .bh{
            font-weight: bold;
            padding-bottom: 2vw;
            border-bottom: 2px solid #000;
        }
        .second span{
            font-size: 3vw;
            margin-left: 4vw;
        }
        .neiRo{
            display: none;
        }
        .show2{
            display: block;
        }
        .neiRo>div{
            width: 100%;
            flex-direction: column;
            margin-top: 3vw;
            margin-bottom: 3vw;
            padding-bottom: 2vw;
            border-bottom: 1px solid #eee;
        }
        .dyh .zuo img{
            width: 35%;
        }
        .dyh{
            display: flex;
            position: relative;
            height: 10vw;
            margin-left: 3vw;
        }
        .dyh .zuo{
            position: absolute;
            left: 12vw;
            flex-direction: column;
        }
        .zuo p{
            color: #aaa;
        }
        .dyh img{
            width: 10%;
            border-radius: 45%;
        }
        .dyh h4{
            font-size: 4vw;
        }
        .dyh p{
            font-size: 2vw;
        }
        .dyh .you{
            position: absolute;
            right: 1vw;
            display: flex;
            margin-top: 2vw;
        }
        .xhz{
            display: flex;
            margin-right: 2vw;
        }
        .dyh .you svg{
            font-size: 3.5vw;
            margin-right: 1vw;
            color: #aaa;
        }
        .dyh .you p{
            font-size: 3vw;
            color: #aaa;
        }
        .deh{
            margin-top: 2vw;
            margin-left: 3vw;
            margin-right: 3vw;
        }
        .deh h3{
            margin-top: 1vw;
            font-size: 4.5vw;
        }
        .deh p{
            margin-top: 1vw;
            font-size: 3.5vw;
            line-height: 6vw;
        }
        .neiRo>div>img{
            width: 35vw;
            height: 20vw;
            margin-left: 3vw;
            margin-top: 1vw;
        }
    </style>
</head>
<body>
    <div class="FF">
        <div class="header">
            <div class="head zuo">
                <a class="dh">推荐</a>
                <a>社区</a>
            </div>
            <div class="head you">
                <a href="./sousuo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjian"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="first show1">
            <div class="swiper mySwiper1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/yxzh.PNG"></a>
                        <p>游戏综合</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/csgo.jpg"></a>
                        <p>CS:GO</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/ch6h.PNG"></a>
                        <p>彩虹六号</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/dota2.jpg"></a>
                        <p>刀塔2</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/hyzt.PNG"></a>
                        <p>盒友杂谈</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/zjyx.PNG"></a>
                        <p>主机游戏</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/pubg.jpg"></a>
                        <p>绝地求生</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/my2.png"></a>
                        <p>命运2</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/zfx/qb.PNG"></a>
                        <p>全部</p>
                    </div>
                </div>
            </div>
            <div class="second">
                <span>热榜</span>
                <span class="bh">推荐</span>
            </div>
            <div class="neiRo">热榜</div>
            <div class="neiRo show2">
                <!-- <div class="yghz">
                    <div class="dyh">
                        <img src="./img/csgo.jpg">
                        <div class="zuo">
                            <h4>用户名</h4>
                            <p>21分钟前·盒友杂谈</p>
                        </div>
                        <div class="you">
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianzan_kuai"></use>
                                </svg>
                                <p>29</p>
                            </div>
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-pinglun2"></use>
                                </svg>
                                <p>24</p>
                            </div>
                        </div>
                    </div>
                    <div class="deh">
                        <h3>是新头像哒！给大伙儿展示一下</h3>
                        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
                    </div>
                    <img src="./img/IMG_2706(20211210-194251).JPG" alt="">
                </div>
                <div class="yghz">
                    <div class="dyh">
                        <img src="./img/csgo.jpg">
                        <div class="zuo">
                            <h4>用户名</h4>
                            <p>时间·分类</p>
                        </div>
                        <div class="you">
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianzan_kuai"></use>
                                </svg>
                                <p>29</p>
                            </div>
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-pinglun2"></use>
                                </svg>
                                <p>24</p>
                            </div>
                        </div>
                    </div>
                    <div class="deh">
                        <h3>文章标题</h3>
                        <p>内容</p>
                    </div>
                    <img src="./img/IMG_2706(20211210-194251).JPG" alt="">
                </div>
                <div class="yghz">
                    <div class="dyh">
                        <img src="./img/csgo.jpg">
                        <div class="zuo">
                            <h4>用户名</h4>
                            <p>时间·分类</p>
                        </div>
                        <div class="you">
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianzan_kuai"></use>
                                </svg>
                                <p>29</p>
                            </div>
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-pinglun2"></use>
                                </svg>
                                <p>24</p>
                            </div>
                        </div>
                    </div>
                    <div class="deh">
                        <h3>文章标题</h3>
                        <p>内容</p>
                    </div>
                    <img src="./img/IMG_2706(20211210-194251).JPG" alt="">
                </div>
                <div class="yghz">
                    <div class="dyh">
                        <img src="./img/csgo.jpg">
                        <div class="zuo">
                            <h4>用户名</h4>
                            <p>时间·分类</p>
                        </div>
                        <div class="you">
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianzan_kuai"></use>
                                </svg>
                                <p>29</p>
                            </div>
                            <div class="xhz">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-pinglun2"></use>
                                </svg>
                                <p>24</p>
                            </div>
                        </div>
                    </div>
                    <div class="deh">
                        <h3>文章标题</h3>
                        <p>内容</p>
                    </div>
                    <img src="./img/IMG_2706(20211210-194251).JPG" alt="">
                </div> -->
            </div>
        </div>
        <div class="first">社区</div>
    </div>











    <ul class="bnav">
        <a href="./index.html">
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xingzhuang-sanjiaoxing"></use>
            </svg>
            <p><a href="./index.html">首页</a></p>
        </li>
        </a>
        <a href="./sq.html">
            <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yuanxingweixuanzhong"></use>
            </svg>
            <p><a href="./sq.html">社区</a></p>
        </li>
        </a>
        <a href="./yxk.html">
            <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-cha"></use>
            </svg>
            <p><a href="./yxk.html">游戏库</a></p>
        </li></a>
        <a href="./w.html">
            <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fangxingweixuanzhong"></use>
            </svg>
            <p><a href="./w.html">我</a></p>
        </li>
        </a>
    </ul>
    <script src="./swiper-7.2.0/swiper/swiper-bundle.min.js"></script>
    <script src="./sq.js"></script>
</body>
</html>